<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS与css相关</title>
    <style>
        .father1{
            background-color: red;
            width: 200px;
            height: 200px;
            float: left;
        }
        .son1{
            width: 50px;
            background-color: rebeccapurple;
        }
        .son1-2{
            clear: both;
        }
        .father2{
            overflow: hidden;/*这样就会自动适应子元素的噶都*/
            width: 200px;
            background-color: aqua;
        }
        .son2{
            float: left;
            height: 300px;
            background-color: bisque;
        }
        .father3{
            float: left;
            background-color: royalblue;
            width: 200px;
            height: 200px;
            
        }
        .clearfix:after{
            content:"";				/*设置内容为空*/
            height:0;				/*高度为0*/
            line-height:0;			/*行高为0*/
            display:block;			/*将文本转为块级元素*/
            visibility:hidden;		/*将元素隐藏*/
            clear:both;				/*清除浮动*/
        }
        .clearfix{
            zoom:1;					/*为了兼容IE*/
            background-color: red;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            
        }
        .box1_box{
            width: 50px;
            background-color: aqua;
            margin: 0 auto;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            position:absolute;
            left:0;
            right: 0;
            margin: 0 auto;
        }
        .box3{
            width: 100px;
            height: 100px;
           
            background-color: rebeccapurple;
        }
        .box3_box{
            margin-left: 50%;
            transform: translateX(-50%);
            background-color: red;
        }
        .box4{
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            background-color: rebeccapurple;
        }
        .box4_box{
            background-color: red;
        }
        .center_one{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .center{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center_two{
            width: 200px;
            height: 200px;
            background-color: red;
            
        }
    </style>
</head>
<body>
    <h1>清除浮动</h1>
    <div class="father1">父1
        <div class="son1">子1</div>
    </div>
    <div class="son1-2">清除浮动</div>
<!-- 上方使用clear:both -->

    <div class="father2">父2
        <div class="son2">子2</div>
    </div>

    <div class="clearfix">
        <div class="wrap">aaa</div>
    </div>

    <h1>居中</h1>
    <div class="box1">
        <div class="box1_box">margin</div>
    </div>
    <br/>
    <div class="box2">
    绝对定位+margin
    </div>
    <br/>
    <div class="box3">
        <div class="box3_box">transform:translateX</div>
    </div>
    <br/>
    <div class="box4">
        <div class="box4_box">弹性盒子</div>
    </div>

    <h1>垂直居中</h1>
    <div class="center_one">1号</div>
    <div class="center">
        <div class="center_two">2号</div>
    </div>
    <h1>双向绑定</h1>
    <input type="text" placeholder="请输入内容" id="text" oninput="changeval(this.value)" value="" />
    <b id="msg"></b>
    <script>
        /*Promise*/
        let p =new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve("成功");
                // reject("失败")
            }, 2000);
        })
        p.then(res=>{
            console.log("成功了拿到数据",res)
        }).catch(res=>{
            console.log("失败了拿到数据",res);
        })

        let test1=new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve("test1");
                // reject("失败")
            }, 2000);
        })
        let test2=new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve("test2");
                // reject("失败")
            }, 1000);
        })
        let test3=new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve("test3");
                // reject("失败")
            }, 3000);
        })
        //手写Promise.race
        Promise.myrace=(arg)=>{
            return new Promise((resolve, reject) => {
                for(let i=0;i<arg.length;i++){
                    return arg[i].then(resolve,reject)
                }
            })
        }
        console.log(Promise.myrace([test1,test2,test3]).then(res=>console.log("成功,最快的",res)))
        //手写Promise.all
        Promise.myall=(arg)=>{
            let count=0;
            let arr=new Array();
            return new Promise((resolve,reject)=>{
                arg.forEach((item,i)=> {
                    Promise.resolve(item).then(res=>{
                        arr[i]=res;
                        count++;
                        if(count===arg.length){
                            resolve(arr)
                        }
                    }).catch((err)=>{reject(err)})
                });
            })
        }
        console.log(Promise.myall([test1,test2,test3]).then(res=>console.log("成功,all",res)))
        /**
        * 判断对象是否为空对象
        */
        let obj={};
        if(JSON.stringify(obj)=="{}"){
            console.log("该对象是空对象[JSON.stringify()]");
        }
        let flag=true;
        for (var item in obj) {
            flag=false;
        }
        if(flag){
            console.log("该对象是空对象[for...of]");
        }
        let obj1=Object.keys(obj);
        if(obj1.length===0){
            console.log("该对象是空对象[Object.keys()]");
        }

        /**
         * 实现双向绑定
         */
        const data={
            text:"值"
        }
        const input=document.getElementById("text");
        const msg=document.getElementById("msg");
        Object.defineProperty(data,'text',{
            set(newVal){
                input.value=newVal;
                msg.innerText=newVal;
            }
        })
        function changeval(val){
            data.text=val;
        }

        /**
         * 数组扁平化
         * 将一个多维数组转为一维数组
         */
        let myarr=[1,312,21,[12,32,12],[222,111,333]]
         //1.toString转字符串再转数组
        function flatten(arr){
            return arr.toString().split(",");
        }
        //2.join转字符串再转数组
        function flatten2(arr){
            return arr.join(',').split(",");
        }
        //3.递归
        function flatten3(arr){
            let newarr=[];
            arr.map(item=>{
                if(Array.isArray(item)){
                    newarr=newarr.concat(flatten3(item));
                }else{
                    newarr.push(item)
                }
            })
            return newarr;
        }
        console.log('数组扁平化1',flatten(myarr))
        console.log('数组扁平化2',flatten2(myarr))
        console.log('数组扁平化3',flatten3(myarr))

        /**
         * 排序
         */
        let myarr1=[23,123,23,1,24,22]
        //选择排序
        function xzsort(arr){
            let team=0;
            for(let i=0;i<arr.length-1;i++){
                for(let j=i+1;j<arr.length;j++){
                    if(arr[i]<arr[j]){
                        arr[i]=team;
                        arr[i]=arr[j];
                        arr[j]=team;
                    }
                }
            }
            return arr;
        }
        console.log('选择排序',xzsort(myarr1))
        //冒泡排序
        function mpsort(arr){
            for(let i=0;i<arr.length-1;i++){
                for(let j=0;j<arr.length-j-1;j++){
                    if(arr[j]<arr[j+1]){
                        var team=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=team;
                    }
                }
            }
            return arr;
        }
        console.log("冒泡排序",mpsort(myarr1));

        /**
         * 将req封装成promise异步形式
         * request({
         *     url:"",
         *     data:"",
         *     success:function,
         *     fail:function 
         * })
         */
        let req=function(url,data){
            return new Promise((resolve,reject)=>{
                request({
                    url:url,
                    data:data,
                    success:(msg)=>{
                        resolve(msg)
                    },
                    fail:(error)=>{
                        reject(error)
                    }
                })
            })
        }
        req("http://www.baidu.com",{}).then(data=>{
            console.log(data);
        }).catch(err=>{
            console.log(err);
        })
    </script>
</body>
</html>